<template>
  <div class="flex-containers">
    <div class="flex-container">
      <el-card
        class="box-card"
        style="display: inline-block; margin-top: 10px; margin-left: 10px"
      >
        <pointChart> </pointChart>
      </el-card>
      <el-card
        class="box-card"
        style="display: inline-block; margin-top: 10px; margin-left: 1%"
      >
        <hotChart />
      </el-card>
    </div>
    <div class="flex-container">
      <el-card
        class="box-card"
        style="display: inline-block; margin-top: 10px; margin-left: 1%"
      >
        <LineChart />
      </el-card>
      <el-card
        class="box-card"
        style="display: inline-block; margin-top: 10px; margin-left: 1%"
      >
        <hotChart2 />
      </el-card>
    </div>
  </div>
</template>
<script>
import pointChart from "@/components/pointChart.vue";
import hotChart from "@/components/hotChart.vue";
import LineChart from "@/components/LineChart.vue"
import hotChart2 from "@/components/hotChart2.vue"

export default {
  name: "other",
  components: {
    // 2.注册局部组件
    pointChart,
    hotChart,
    LineChart,
    hotChart2
  },
};
</script>
<style>
.canvas {
  position: absolute;
}
.box {
  position: relative;
  width: 700px; /* 确保父元素的宽度足够 */
  height: 400px; /* 确保父元素的高度足够 */
}
.flex-container {
  display: flex;
  justify-content: space-between; /* 在两个 card 之间平均分布空间 */
  /* flex-direction: column; 垂直布局 */
}
.flex-containers {
  display: flex;
  justify-content: space-between; /* 在两个 card 之间平均分布空间 */
  flex-direction: column;
  height: auto;
}
.box-card {
  flex: 1;
}

#videoCamera {
  z-index: 2; /* 设置视频的z-index为1，位于canvas之下 */
}

#canvasArrow {
  z-index: 3; /* 设置canvas的z-index为2，位于视频之上 */
}
.bm-view {
  margin-top: 20px;
  width: 100%;
  height: 800px;
}
</style>
